

    import * as React from 'react';
    import * as ReactDOM from 'react-dom';
    import * as Reflux from 'reflux';

    var ajax = require("./select-reflux.js");


    var SELECT = React.createClass({
        //mixins: [Reflux.connect(SelectStore,'dataResult')],
        propTypes: {
            name: React.PropTypes.string.isRequired,
        },
        getDefaultProps: function () {
            return {
                value: null,
                keyName: "",
                isAuto: true,
                isRefresh:false,//是否强制刷新
                showName: "name",
                url: "/api/caigou/dict/list",
                searchParam:"",
                defaultShowName:"",
                isClick:false,
                isClear:false,
                vaIsDo:false,
                placeholder:"请选择"
            };
        },
        //state isRefresh 是否已经强制刷新
        getInitialState: function () {
            return {value: '', listShow: false, dataResult: false,item: "", isLoad: false,stateNum:0,isSelfClick:false}
        },
        componentWillMount: function () {
            var temp = ajax.init();
            if(this.props.defaultValue!=""){
                 this.setState({
                    value: this.props.defaultShowName,item:this.props.defaultValue
                })
                //  this.props.setFormValue({"name": this.props.name, "value": item});
              this.props.setFormValue({"name": this.props.name, "value": this.props.defaultValue});
             // console.error(this.props.name+"sb  "+this.props.vaIsDo)
              this.props.handleBlur({"name": this.props.name, "value": this.props.defaultValue},false)
              this.props.vaIsDo&&this.props.handleBlur({"name": this.props.name, "value": this.props.defaultValue});
            }else{
                this.setState({
                    value: this.props.placeholder
                })
            }

            this.SelectActions = temp.SelectActions;
            this.SelectStore = temp.SelectStore;
            this.unsubscribe = this.SelectStore.listen(this.onStatusChange);
            this.props.isAuto && this.SelectActions.get(this.props.url, this.props.searchParam);
        },
        componentWillReceiveProps:function(nextProps){
            //console.log(" select say     已加载组件收到新的参数时调用"+JSON.stringify(nextProps))  //isRefresh
            /*if(nextProps.isRefresh){
                //console.info("selesect  say  强制刷新 ")
                //this.setState({"value":""});
                this.props.isRefresh&&this.SelectActions.get(this.props.url, this.props.searchParam);
            }*/
        },
        onStatusChange: function (result) {



            var items = this.props.keyName==""?result.result:(result.result[this.props.keyName]), item = {}, selectItem = false, state = {};
            for (var i = 0; i < items.length; i++) {
                item = items[i];
                if (item[this.props.valuekey] != undefined && item[this.props.valuekey] == this.props.defaultValue) {
                    selectItem = item;
                }
            }
            if (!selectItem) {
                selectItem = "";
                // selectItem = {};
                // selectItem[this.props.valuekey] = "";
                //selectItem[this.props.showName] = this.props.placeholder==undefined?"":this.props.placeholder;
            }
            //console.log(this.props.defaultValue + " select say :" + JSON.stringify(selectItem));

            if(this.props.defaultValue!=""){
              this.getValue(selectItem);
             // this.props.handleBlur(this.state.item);

            }
            if(this.props.isAuto){
               // this.setState({"dataResult": result, "isLoad": true,isClick:(this.props.isClick==undefined?false:this.props.isClick)});
                this.setState({"dataResult": result, "isLoad": true,isClick:this.props.isClick});
            }else{
                this.setState({"listShow":true,"dataResult": result, "isLoad": true,isClick:true});
                //this.setState({"listShow":true,"dataResult": result, "isLoad": true,isClick:(this.props.isClick==undefined?false:this.props.isClick)});
            }

            //console.log("click  55555555555555555555555555555"+this.state.isClick)

            //this.props.isAuto || this.handleClick();

        },
        componentDidMount: function () {
                  //console.info("selesect    sya stateNum "+this.state.stateNum)
        },
        componentWillUnmount: function () {
            this.unsubscribe();
        },
        componentWillUpdate:function(nextProps,nextState){
            //nextState.isSelfClick
            //if(!nextState.isSelfClick&&nextProps.reFreshNum&&nextState.stateNum<nextProps.reFreshNum&&this.state.isLoad){
             if(nextProps.reFreshNum&&nextState.stateNum<nextProps.reFreshNum){
                console.error("selesect  say  强制刷新 "+nextProps.name)
                //this.setState({"stateNum":Number(this.state.stateNum)+1,"isClick":false,"isLoad":false,"value":"",item:""});
                this.setState({"stateNum":Number(nextProps.reFreshNum),"isClick":false,"isLoad":false,"value":"",item:""});
                this.props.handleBlur("",this);
               // this.props.isRefresh&&this.SelectActions.get(this.props.url, this.props.searchParam);
            }
            return false;




            //this.props.isRefresh&&this.SelectActions.get(this.props.url, this.props.searchParam);
         /*   if(this.props.isRefresh){
                //console.info("selesect  say  强制刷新 ")
            }

             */
        },
        handleChange: function (event) {
            //this.setState({value: event.target.value.substr(0, 140)});
            //console.log("fuck")
        },
        handleClick: function (e) {
            if (!this.props.isAuto && !this.state.isLoad) {
                this.SelectActions.get(this.props.url, this.props.searchParam);

            } else {
                this.setState({listShow: !this.state.listShow, isClick: true})

                console.warn(this.state.value)
            }

            //console.log("fuck             --------------------------------------------------")
        },
        getValue: function (item) {
            console.log("点击值:" + JSON.stringify(item));
            this.setState({value: item.name, listShow: false, isClick: false, "item": item,isSelfClick:true});
            if (this.props.valuekey) {
                this.props.setFormValue({"name": this.props.name, "value": item[this.props.valuekey]});
            } else {
                this.props.setFormValue({"name": this.props.name, "value": item});
            }
        },
        handleBlur: function () {
            //console.info("select 鼠标绝对不会是进入这里了吧")
            if (this.state.isClick) {
                this.setState({listShow: false, isClick: false})
                this.props.handleBlur(this.state.item,this);
            }
             console.log("鼠标移出 select"+this.state.value);
        },
        moveOutDrop:function(){
            if (this.state.isClick) {
                this.setState({listShow: false, isClick: false})
            }
        },
         setAll:function(){
            this.setState({value: this.props.placeholder, listShow: false, isClick: false, "item": ""});
            this.props.setFormValue({"name": this.props.name, "value": ""});
        },
        render: function () {
            var value = this.state.value, $Li = [], item, selectItem,temp;
            var result = this.state.dataResult.result;
            //this.props.keyName==""
            //this.props.keyName==""?result.result:(result.result[this.props.keyName])
            var items = this.state.dataResult.result ?(this.props.keyName==""?result:(result[this.props.keyName])): false;
            return (
                <div className="virtual-select" onClick={this.handleClick} onMouseLeave={this.moveOutDrop}>
                    <input type="text" className="input input-normal" value={value} onChange={this.handleChange}/>
                    <label className="icon icon-select">&nbsp;&nbsp;</label>
                    <div className={this.state.listShow?"container-form-select":"hide"}>
                        <div className="temp" onMouseLeave={this.handleBlur}>
                            <Lis setAll={this.setAll} placeholder={this.props.placeholder} isClear={this.props.isClear} onGetValue={this.getValue} items={items} defaultShow="没有查询到数据" defaultValue={this.props.defaultValue}></Lis>
                        </div>
                    </div>
                </div>
            )
        }
    });


    var Li = React.createClass({
        handleClick: function (item) {
            //console.log(JSON.stringify(item))
            this.props.onGetValue(item);
        },
        render: function () {
            var item = this.props.item;
            return (
                <li key={i} onClick={this.handleClick.bind(this,item)}>{item.name}</li>
            );
        }
    })
    //defaultValue
    var Lis = React.createClass({
        componentWillMount: function () {

            //if(this.props.defaultValue)
        },
        handleClick: function (item,e) {
            //console.log(JSON.stringify(item))
            this.props.onGetValue(item);

        },
        setAll:function(){
            this.props.setAll();
        },
        render: function () {
            /*console.log("select tble say isClear:"+this.props.isClear)*/
            if (!this.props.items) {
                return (
                    <ul>
                        <li>{this.props.defaultShow || "无"}</li>
                    </ul>
                )
            }
            return (
                <ul>
                    {(() => {
                        if(this.props.isClear){
                            return (
                                <li onClick={this.setAll}>{this.props.placeholder}</li>
                            )
                        }
                    })()}
                    {
                        this.props.items.map(function (item, i) {
                            return (
                                <li key={i} onClick={this.handleClick.bind(this,item)}>{item.name}</li>
                            );
                        }, this)

                    }
                </ul>

            )
        }

    })
    module.exports =  {
        SELECT: SELECT,
        Lis: Lis
    }

